<!-- 增加购物车动画效果 -->
<template />

<script setup lang="ts">
import { watch } from 'vue'
import { ENTRY_BASKET_ID } from '@/ts/utils/constant'

const props = defineProps({
    event: { type: Object, default: () => ({}) },
})

watch(
    () => props.event,
    (val, oldVal) => {
        // if()
        console.log('val11', val)
        
        triggerAddAnimation(val, ENTRY_BASKET_ID)
    },
    {
        deep: true,
    }, 
)

const triggerAddAnimation = (event: MouseEvent, idName: string) => {
    const destinationEl = document.querySelector(`#${ idName }`) as HTMLDivElement
    if (!destinationEl) {
        return
    }
    console.log('destinationEl2', event, destinationEl)
    const PlUS_INNER_SIZE = 30
    const moveEl = document.createElement('div')
    moveEl.className = 'plus'
    moveEl.innerHTML = '<div class="plus-inner"></div>'

    const addClickBtnEl = event.target as HTMLButtonElement
    const addClickBtnElRect = addClickBtnEl.getBoundingClientRect()

    const left = addClickBtnElRect.left + addClickBtnElRect.width / 2 - PlUS_INNER_SIZE / 2
    const top = addClickBtnElRect.top - PlUS_INNER_SIZE
    const destinationElRect = destinationEl.getBoundingClientRect()

    const x = destinationElRect.left + destinationElRect.width / 2 - PlUS_INNER_SIZE / 2 - left
    const y = destinationElRect.top - PlUS_INNER_SIZE - top

    moveEl.style.setProperty('--left', `${ left }px`)
    moveEl.style.setProperty('--top', `${ top }px`)
    moveEl.style.setProperty('--x', `${ x }px`)
    moveEl.style.setProperty('--y', `${ y }px`)

    moveEl.addEventListener('animationend', () => {
        moveEl.remove()
    })

    document.body.appendChild(moveEl)
}
</script>

<style lang="scss" scoped></style>

<style>
:root {
    --x: 0;
    --y: 0;
    --left: 0;
    --top: 0;
}

@keyframes moveY {
    to {
        transform: translateY(var(--y));
    }
}

@keyframes moveX {
    to {
        transform: translateX(var(--x));
    }
}
.plus {
    width: 30px;
    height: 30px;
    border-radius: 50%;

    position: fixed;
    left: var(--left);
    top: var(--top);
    z-index: 100;

    display: flex;
    justify-content: center;
    align-items: center;

    animation: moveY 0.8s cubic-bezier(0.5, -0.5, 1, 1);
}
.plus-inner {
    width: 100%;
    height: 100%;
    background-image: url('@/images/c_question_basket.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: moveX 0.8s linear;
}
</style>
